<template>
	<view>
		<view class="wrap" style="background-color: #f8f8f8;">
			<view
				style="background: url('https://resourse.cnlhjt.com/upload/20220825/f33651281c340fe87e130424b86d092a.png') no-repeat center / 100% 95%; background-position: top;">
				<u-cell-group :border="false">
					<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;">
						<u-icon name="https://resourse.cnlhjt.com/upload/20220825/35318c89937327b6a3fff60dfd983f05.png" label="个人中心" labelColor="#fff" space="6"></u-icon>
					</view>
					<view class="card-head">
						<view v-if="isLogin">
							<u-cell :border="false">
								<view slot="icon">
									<u-avatar :src="user.avatar" defaultUrl="http://meiju.cnlhjt.com/upload/20220822/f1477fb46c8a9013f44d71cbff9ced6e.png" mode="aspectFill" size="90"></u-avatar>
								</view>
								<view slot="label" style="margin-left: 20rpx;">
									<view>
										<text style="font-size: 38rpx;color: #FFFFFF;">{{user.username}}</text>
									</view>
									<view v-if="user.type == 1" style="margin-top: 20rpx; color: #FAECD8;">
										<text>业主</text>
									</view>
									<view v-else-if="user.type == 2" style="margin-top: 20rpx; color: #FAECD8;">
										<text>家人</text>
									</view>
									<view v-else-if="user.type == 3" style="margin-top: 20rpx; color: #FAECD8;">
										<text>租户</text>
									</view>
									<view v-else style="margin-top: 20rpx; color: #FFFFFF;">
										<text>访客</text>
									</view>
								</view>
								<view slot="value" style="margin-right: 10rpx;margin-bottom:70rpx;" >
									<view class="dis_inl_blo" style="margin-right:20rpx;" @click="toscancode">
										<u-icon name="scan" size="28" color="#fff"></u-icon>
									</view>
									<view class="dis_inl_blo" @click="tosetting">
										<u-icon name="https://resourse.cnlhjt.com/upload/20220825/d713a33d221a290f7d086e5c0120f439.png" size="22" color="#fff"></u-icon>
									</view>
									
								</view>
							</u-cell>
						</view>
						<view v-else>
							<u-cell :border="false">
								<view slot="icon">
									<u-avatar :src="user.avatar" size="90"></u-avatar>
								</view>
								<view slot="label" style="margin-left: 10rpx;">
									<view>
										<text style="font-size: 32rpx;">{{user.username}}</text>
									</view>
									<view style="margin-top: 15rpx;">
										<text style="font-size: 28rpx; color: #FFFFFF;">{{user.userid}}</text>
									</view>
									<view v-if="user.type == 1" style="margin-top: 20rpx; color: #FAECD8;">
										<text>业主</text>
									</view>
									<view v-else-if="user.type == 2" style="margin-top: 20rpx; color: #FAECD8;">
										<text>家人</text>
									</view>
									<view v-else-if="user.type == 3" style="margin-top: 20rpx; color: #FAECD8;">
										<text>租户</text>
									</view>
									<view v-else style="margin-top: 20rpx; color: #FFFFFF;">
										<text>访客</text>
									</view>
								</view>
							</u-cell>
						</view>

						<view v-if="isLogin">
							<view v-if="user.home == '' || user.home == 0" @click="myHouse">
								<text style="font-size: 30rpx; margin-left: 40rpx;color: #FFFFFF;">点击绑定房屋</text>
							</view>
							<view v-else>
								<text style="font-size: 30rpx; margin-left: 40rpx;color: #FFFFFF;">{{user.home}}</text>
								<text style="font-size: 30rpx; margin-left: 40rpx; color: antiquewhite; background-color: burlywood; padding: 0rpx 10rpx; border-radius: 10rpx;" @click="myHouse">切换房屋</text>
							</view>
						</view>
						<view v-else @click="login">
							<text style="font-size: 30rpx; margin-left: 40rpx;color: #FFFFFF;">{{user.home}}</text>
						</view>
					</view>

				</u-cell-group>

				<view style="margin-top: 20rpx;width: 96%; margin-left: 2%;">
					<view class="iconType" style="margin-top: 10rpx;">
						<view class="item">
							<view class="icon" @click="myHouse">
								<u-icon size="45" name="https://resourse.cnlhjt.com/upload/20220825/9f744b1f30894841067fa1f7f08fc170.png" label="我的房屋" labelSize="28rpx"
									labelPos="bottom" space="6"></u-icon>
							</view>

						</view>
						<view class="item">
							<view class="icon" @click="myPark">
								<u-icon size="45" name="https://resourse.cnlhjt.com/upload/20220825/4b1940c1adf5c23de7108cca00048a56.png" label="我的车位" labelSize="28rpx"
									labelPos="bottom" space="6"></u-icon>
							</view>

						</view>
						<view class="item">
							<view class="icon" @click="myFamily">
								<u-icon size="45" name="https://resourse.cnlhjt.com/upload/20220825/52af53e727507ce2e1bcf514289a1dec.png" label="我的家庭" labelSize="28rpx"
									labelPos="bottom" space="6"></u-icon>
							</view>

						</view>
						<view class="item">
							<view class="icon" @click="myTool">
								<u-icon size="45" name="https://resourse.cnlhjt.com/upload/20220825/147d33ff75858bae094eab9947915ae3.png" label="我的工具" labelSize="28rpx"
									labelPos="bottom" space="6"></u-icon>
							</view>

						</view>
					</view>
				</view>
			</view>
			
			<view style="background-color: #f8f8f8;padding-bottom:20rpx;">
				<view style="margin-top: 20rpx;width: 96%; margin-left: 2%; background-color: #fefefe;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
						<u-cell-group style="margin-top: 10rpx;" :border="false">
							<u-cell :border="false" isLink @click="myCar" icon="https://resourse.cnlhjt.com/upload/20220825/a3f97ebdec96f1948f73c23d3fb5cdf3.png"
								title="我的车辆"></u-cell>
							<u-cell :border="false" isLink @click="myVisit" icon="https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png"
								title="我的访客"></u-cell>
							<u-cell :border="false" isLink @click="myRepair" icon="https://resourse.cnlhjt.com/upload/20220825/07aeb0189279e8e4c77429c27705bb1b.png"
								title="我的报修"></u-cell>
						</u-cell-group>
					</view>
				
					<view style="margin-top: 20rpx;width: 96%; margin-left: 2%; background-color: #fefefe; ">
						<u-cell-group style="margin-top: 10rpx;" :border="false">
							<u-cell :border="false" isLink @click="myShare" icon="https://resourse.cnlhjt.com/upload/20220825/51946977cd85a7698d279c00cfa51285.png"
								title="我的共享"></u-cell>
							<u-cell :border="false" isLink @click="myCommunity" icon="https://resourse.cnlhjt.com/upload/20220825/88e8cd69cbe5396f63d499381abba8b9.png"
								title="我的社圈"></u-cell>
							<u-cell :border="false" isLink @click="myFee" icon="https://resourse.cnlhjt.com/upload/20220825/e8a859b43f996871e68e2563e7bd3bb8.png"
								title="我的缴费"></u-cell>
						</u-cell-group>
					</view>
				
					<!-- <view style="margin-top: 20rpx;width: 96%; margin-left: 2%; background-color: #fefefe;
				box-shadow: 5rpx 5rpx 20rpx rgba(0,0,0,0.15);">
						<u-cell-group style="margin-top: 10rpx;" :border="false">
							<u-cell :border="false" isLink @click="myFee" icon="https://s4.ax1x.com/2022/02/17/H4q5n0.png"
								title="我的缴费"></u-cell>
							<u-cell :border="false" isLink @click="myCollect" icon="https://resourse.cnlhjt.com/upload/20220825/c6be59e8a2986b7a448c5415e3b96777.png"
								title="我的积分"></u-cell>
						</u-cell-group>
					</view> -->
				
					<view style="margin-top: 20rpx;width: 96%; margin-left: 2%; background-color: #fefefe; border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;">
						<u-cell-group style="margin-top: 10rpx;" :border="false">
							<u-cell :border="false" isLink @click="myReport" icon="https://resourse.cnlhjt.com/upload/20220825/b8d7d76da882712c2570e95b5c717bd9.png"
								title="功能反馈"></u-cell>
							<u-cell :border="false" isLink @click="myCustomerService" icon="https://resourse.cnlhjt.com/upload/20220825/44d2d1ad4032c57d5481c584f41de301.png"
								title="客服中心"></u-cell>
						</u-cell-group>
					</view>
			</view>
			
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { getInfo } from "@/service/userService.js";
	import {
		confirmRepair
	} from "@/service/propertyService.js";
	export default {
		data() {
			return {
				user: {
					avatar: 'https://img2.baidu.com/it/u=3716715980,137628655&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					username: '您好！请登录！',
					userid: '请登陆您的账户',
					level: 0,
					type: 0,
					home: '点击绑定房屋'
				},
				isLogin: false,
				reFresh: "",
			}
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
				reFresh: function() {
					getInfo().then(this.getInfo);
				}
		},
		computed: {

		},
		mounted() {
			if (this.$store.state.isLogin == true) {
				this.isLogin = true;
				this.user = {
					avatar:this.$store.state.avatar,
					username:this.$store.state.username,
					userid: this.$store.state.userid,
					level: this.$store.state.level,
					type: this.$store.state.userType,
					home: this.$store.state.home
				}
				getInfo().then(this.getInfo);
				// if(this.user.home == ''){
				// 	getInfo().then(this.getInfo);
				// }
			}

		},
		onShow() {
			// getInfo().then(this.getInfo);
			if (this.$store.state.isLogin == true){
				this.user = {
					avatar:this.$store.state.avatar,
					username:this.$store.state.username
				}
			}
			
		},
		methods: {
			getInfo(e){
				if(e.code == 200){
					this.user.avatar=e.result.avatar;
					this.user.username=e.result.username;
					this.user.type=e.result.type;
					if(e.result.house != ''){
						this.user.home = e.result.house;
						this.$u.vuex('home', e.result.house);
					}
				}
			},
			toscancode(){
				var that=this;
				uni.scanCode({
					success(res) {
						console.log(res);
						confirmRepair({
							gid: res.result
						}).then(that.result);
					}
				})
			},
			
			result(e) {
				console.log(e);
				if (e.code == 200) {
					if (e.result == 'success') {
						uni.showToast({
							title: e.msg,
							icon: "success",
							complete() {
								uni.navigateBack({
									delta: 2
								})
							}
						});
					} else {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: e.result.timeStamp,
							nonceStr: e.result.nonceStr,
							package: e.result.package,
							signType: 'MD5',
							paySign: e.result.paySign,
							success: this.success,
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								showToast(err.requestPayment);
							}
						});
					}
				} else {
					uni.showToast({
						title: e.msg,
						icon: "error"
					});
				}
			},
			myFee() {
				this.$u.route({
					url: '/pagesMine/fee/index',
					params: {

					}
				});
			},
			myRepair() {
				this.$u.route({
					url: '/pagesMine/repair/index',
					params: {

					}
				});
			},
			myHouse() {
				this.$u.route({
					url: '/pagesMine/house/index',
					params: {

					}
				});
			},
			myCar() {
				// this.$u.route({
				// 	url: '/pagesMine/car/index',
				// 	params: {

				// 	}
				// })
				
				this.$refs.uToast.show({
					type: 'error',
					title: '失败',
					icon:false,
					message: "智慧生活，敬请期待",
				})
			},
			myReport() {
				this.$u.route({
					url: '/pagesMine/report/index',
					params: {

					}
				})
			},
			myVisit() {
				this.$u.route({
					url: '/pagesMine/visit/index',
					params: {

					}
				})
			},
			myCommunity() {
				this.$u.route({
					url: '/pagesMine/community/index',
					params: {

					}
				})
			},
			myShare() {
				this.$u.route({
					url: '/pagesMine/share/index',
					params: {

					}
				})
			},
			myPark() {
				// this.$u.route({
				// 	url: '/pagesMine/park/index',
				// 	params: {

				// 	}
				// })
				this.$refs.uToast.show({
					type: 'error',
					title: '失败',
					icon:false,
					message: "智慧生活，敬请期待",
				})
			},
			myFamily() {
				this.$u.route({
					url: '/pagesMine/family/index',
					params: {

					}
				})
			},
			myTool() {
				this.$u.route({
					url: '/pagesMine/tool/index',
					params: {

					}
				})
			},
			tosetting(){
				this.$u.route({
					url: '/pagesMine/setting/index',
					params: {
				
					}
				})
			},
			myCustomerService(){
				this.$u.route({
					url: '/pagesMine/service/index',
					params: {
				
					}
				})
			},
			login() {
				this.$u.route({
					url: '/pages/login/index',
					params: {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.wrap {
		width: 100%;
		padding-left: 0%;
		padding-right:0%;
		padding-bottom: 20rpx;
	}

	.card-head {
		border-radius: 20rpx;
	}

	.iconType {
		display: flex;
		padding: 25rpx 50rpx;
		background-color: #fefefe;
		border-radius: 20rpx;
		// box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
		justify-content: space-between;
	}

	.icon {
		height: auto;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
	}
</style>
